<template>
    <Modal class="w-dialog-wrapper" v-model:visible="visible" :confirmLoading="loading" destroyOnClose
        :maskClosable="closeOnClick" v-bind="$attrs" :width="width">
        <slot></slot>
        <template #footer v-if="$slots.footer">
            <slot name="footer"></slot>
        </template>
    </Modal>
</template>
<script setup>
import { ref } from 'vue';
import { Modal } from 'ant-design-vue';
import './index.scss';

defineProps({
    /**
     * 宽度
     */
    width: {
        type: [Number, String],
        default: 700
    },
    /**
     * 点击遮罩关闭
     */
    closeOnClick: {
        type: Boolean,
        default: false
    }
});

defineExpose({
    show() {
        visible.value = true;
    },
    hide() {
        visible.value = false;
    },
    start() {
        loading.value = true;
    },
    stop() {
        loading.value = false;
    }
});

/**
 * 显示隐藏
 */
const visible = ref(false);
/**
 * loading
 */
const loading = ref(false);
</script>
